<!DOCTYPE html>
<html lang="en-us">
<head>

  
  
  
  

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="generator" content="Wowchemy 5.7.0 for Hugo">

  
    <link rel="manifest" href="/manifest.webmanifest">
  

  <link rel="icon" type="image/png" href="/media/icon_hu0b7a4cb9992c9ac0e91bd28ffd38dd00_9727_32x32_fill_lanczos_center_3.png">
  <link rel="apple-touch-icon" type="image/png" href="/media/icon_hu0b7a4cb9992c9ac0e91bd28ffd38dd00_9727_192x192_fill_lanczos_center_3.png">

  <link rel="canonical" href="http://fitsir.gitee.io/slides/example/">

  <title>Slides | 机器人实验室</title>

  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/theme/black.min.css">

  
  
  
  
    
    <link rel="stylesheet" href="/css/libs/chroma/dracula.min.css">
  

  
  
  
</head>
<body>

  
<div class="reveal">
  <div class="slides">
    
    
    

    
    
    
    
    

    
    

    
    
    
    <section>
    
      <h1 id="create-slides-in-markdown-with-wowchemy">Create slides in Markdown with Wowchemy</h1>
<p><a href="https://wowchemy.com/" target="_blank" rel="noopener">Wowchemy</a> | <a href="https://wowchemy.com/docs/content/slides/" target="_blank" rel="noopener">Documentation</a></p>

    </section>
    

    
    
    
    <section>
    
      
<h2 id="features">Features</h2>
<ul>
<li>Efficiently write slides in Markdown</li>
<li>3-in-1: Create, Present, and Publish your slides</li>
<li>Supports speaker notes</li>
<li>Mobile friendly slides</li>
</ul>

    </section>
    

    
    
    
    <section>
    
      
<h2 id="controls">Controls</h2>
<ul>
<li>Next: <code>Right Arrow</code> or <code>Space</code></li>
<li>Previous: <code>Left Arrow</code></li>
<li>Start: <code>Home</code></li>
<li>Finish: <code>End</code></li>
<li>Overview: <code>Esc</code></li>
<li>Speaker notes: <code>S</code></li>
<li>Fullscreen: <code>F</code></li>
<li>Zoom: <code>Alt + Click</code></li>
<li><a href="https://revealjs.com/pdf-export/" target="_blank" rel="noopener">PDF Export</a></li>
</ul>

    </section>
    

    
    
    
    <section>
    
      
<h2 id="code-highlighting">Code Highlighting</h2>
<p>Inline code: <code>variable</code></p>
<p>Code block:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">porridge</span> <span class="o">=</span> <span class="s2">&#34;blueberry&#34;</span>
</span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="n">porridge</span> <span class="o">==</span> <span class="s2">&#34;blueberry&#34;</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">    <span class="nb">print</span><span class="p">(</span><span class="s2">&#34;Eating...&#34;</span><span class="p">)</span>
</span></span></code></pre></div>
    </section>
    

    
    
    
    <section>
    
      
<h2 id="math">Math</h2>
<p>In-line math: $x + y = z$</p>
<p>Block math:</p>
<p>$$
f\left( x \right) = ;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}}
$$</p>

    </section>
    

    
    
    
    <section>
    
      
<h2 id="fragments">Fragments</h2>
<p>Make content appear incrementally</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">{{% fragment %}} One {{% /fragment %}}
</span></span><span class="line"><span class="cl">{{% fragment %}} **Two** {{% /fragment %}}
</span></span><span class="line"><span class="cl">{{% fragment %}} Three {{% /fragment %}}
</span></span></code></pre></div><p>Press <code>Space</code> to play!</p>
<span class="fragment " >
  One
</span>
<span class="fragment " >
  <strong>Two</strong>
</span>
<span class="fragment " >
  Three
</span>

    </section>
    

    
    
    
    <section>
    
      
<p>A fragment can accept two optional parameters:</p>
<ul>
<li><code>class</code>: use a custom style (requires definition in custom CSS)</li>
<li><code>weight</code>: sets the order in which a fragment appears</li>
</ul>

    </section>
    

    
    
    
    <section>
    
      
<h2 id="speaker-notes">Speaker Notes</h2>
<p>Add speaker notes to your presentation</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{% speaker_note %}}
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">-</span> Only the speaker can read these notes
</span></span><span class="line"><span class="cl"><span class="k">-</span> Press <span class="sb">`S`</span> key to view
</span></span><span class="line"><span class="cl">  {{% /speaker_note %}}
</span></span></code></pre></div><p>Press the <code>S</code> key to view the speaker notes!</p>
<aside class="notes">
  <ul>
<li>Only the speaker can read these notes</li>
<li>Press <code>S</code> key to view</li>
</ul>

</aside>

    </section>
    

    
    
    
    <section>
    
      
<h2 id="themes">Themes</h2>
<ul>
<li>black: Black background, white text, blue links (default)</li>
<li>white: White background, black text, blue links</li>
<li>league: Gray background, white text, blue links</li>
<li>beige: Beige background, dark text, brown links</li>
<li>sky: Blue background, thin dark text, blue links</li>
</ul>

    </section>
    

    
    
    
    <section>
    
      
<ul>
<li>night: Black background, thick white text, orange links</li>
<li>serif: Cappuccino background, gray text, brown links</li>
<li>simple: White background, black text, blue links</li>
<li>solarized: Cream-colored background, dark green text, blue links</li>
</ul>

    </section>
    

    
    
    
      

<section data-noprocess data-shortcode-slide
  
      
      data-background-image="/media/boards.jpg"
  >

<h2 id="custom-slide">Custom Slide</h2>
<p>Customize the slide style and background</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">slide</span> <span class="na">background-image</span><span class="o">=</span><span class="s">&#34;/media/boards.jpg&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">slide</span> <span class="na">background-color</span><span class="o">=</span><span class="s">&#34;#0000FF&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">slide</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;my-style&#34;</span> <span class="p">&gt;</span>}}
</span></span></code></pre></div>
    </section>
    

    
    
    
    <section>
    
      
<h2 id="custom-css-example">Custom CSS Example</h2>
<p>Let&rsquo;s make headers navy colored.</p>
<p>Create <code>assets/css/reveal_custom.css</code> with:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">reveal</span> <span class="nt">section</span> <span class="nt">h1</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">reveal</span> <span class="nt">section</span> <span class="nt">h2</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">reveal</span> <span class="nt">section</span> <span class="nt">h3</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="k">color</span><span class="p">:</span> <span class="kc">navy</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div>
    </section>
    

    
    
    
    <section>
    
      
<h1 id="questions">Questions?</h1>
<p><a href="https://discord.gg/z8wNYzb" target="_blank" rel="noopener">Ask</a></p>
<p><a href="https://wowchemy.com/docs/content/slides/" target="_blank" rel="noopener">Documentation</a></p>

    </section>
    

    
    
  </div>
</div>



  
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/markdown/markdown.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/notes/notes.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/search/search.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/math/math.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/zoom/zoom.min.js" crossorigin="anonymous"></script>

  
  
    <script src="https://cdn.jsdelivr.net/npm/reveal.js-menu@2.1.0/plugin.js" integrity="sha256-M6JwAjnRAWmi+sbXURR/yAhWZKYhAw7YXnnLvIxrdGs=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js-menu@2.1.0/menu.js" integrity="sha256-l14dklFcW5mWar6w/9KaW0fWVerf3mYr7Wt0+rXzFAA=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js-menu@2.1.0/menu.css" integrity="sha256-0fU8HKLaTjgzfaV9CgSqbsN8ilA3zo6zK1M6rlgULd8=" crossorigin="anonymous">
  

  
  

  
  
  <script src="/js/wowchemy-slides.js"></script>

</body>
</html>
